import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/home/convenient/repair/repair_add_controller.dart';
import 'package:kkhousekeep/widget/custom_app_bar.dart';
import 'package:kkhousekeep/widget/custom_button.dart';

import '../../../../widget/form_widget.dart';

class RepairAddPage extends StatelessWidget {
  const RepairAddPage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: Stack(
        children: [
          Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: AssetImage("assets/images/home_bg.png"),
                  fit: BoxFit.fill),
            ),
            child: Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                toolbarHeight: 0,
                backgroundColor: Colors.transparent,
                elevation: 0,
              ),
              body: SingleChildScrollView(
                child: GetBuilder(
                  init: RepairAddController(),
                  builder: (controller) => _builderBodyWidget(controller),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _builderBodyWidget(RepairAddController controller) {
    return Column(
      children: [
        ClipRect(
          clipper: ClipperPath(),
          child: SizedBox(
            height: 202.h,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CustomAppBar("", backgroundColor: Colors.transparent)
                            .leading ??
                        Container(),
                    Padding(
                      padding: EdgeInsets.only(left: 56.w),
                      child: Text(
                        "填写报修信息",
                        style: TextStyle(
                          fontSize: 40.sp,
                          color: const Color(0XFF333333),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  width: 108.w,
                ),
                Image.asset(
                  "assets/images/home_service_property_repair.png",
                  width: 318.w,
                  height: 266.h,
                  fit: BoxFit.fitWidth,
                )
              ],
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 32.w, right: 32.w),
          child: Column(
            children: [
              _builderCommonFrameWidget(
                margin: const EdgeInsets.only(top: 0),
                padding: EdgeInsets.only(left: 24.w, right: 24.w),
                children: [
                  FormWidget.select(
                    labelText: '报修类型',
                    dataList: RepairAreaType.values.map((e) => e.name).toList(),
                    selectIndex: RepairAreaType.values.indexWhere((element) =>
                        element == controller.repairAreaType.value),
                    onChange: (index) =>
                        controller.onChange(repairAreaIndex: index),
                  ),
                  Obx(
                    () => controller.repairAreaType.value.id == 1
                        ? FormWidget.text(
                            labelText: '报修地址',
                            text: controller.address.value,
                          )
                        : FormWidget.edit(
                            labelText: "报修地址",
                            editText: controller.addressOfOut,
                            onChange: (value) =>
                                controller.onChange(address: value),
                          ),
                  ),
                  FormWidget.edit(
                    labelText: '报修人',
                    hintText: "请输入真实姓名",
                    textEditingController: controller.nameController,
                    onChange: (value) => controller.checkIsReady(),
                  ),
                  FormWidget.edit(
                    labelText: '电话',
                    hintText: '请输入手机号码',
                    textEditingController: controller.phoneController,
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(11),
                      FilteringTextInputFormatter.digitsOnly,
                    ],
                    keyboardType: TextInputType.number,
                    hasDividingLine: false,
                    onChange: (value) => controller.checkIsReady(),
                  ),
                ],
              ),
              _builderCommonFrameWidget(
                margin: EdgeInsets.only(top: 16.h, bottom: 24.h),
                children: [
                  FormWidget.select(
                    labelText: '紧急程度',
                    dataList: UrgencyType.values.map((e) => e.name).toList(),
                    selectIndex: UrgencyType.values.indexWhere(
                        (element) => element == controller.urgencyType),
                    onChange: (index) =>
                        controller.onChange(urgencyIndex: index),
                  ),
                  Obx(() => FormWidget.select(
                        labelText: '故障类型',
                        dataList: controller.faultTypeList
                            .map((element) => element.name)
                            .toList(),
                        selectIndex: controller.faultTypeIndex,
                        onChange: (index) =>
                            controller.onChange(faultTypeIndex: index),
                      )),
                  _builderFaultDesWidget(controller),
                ],
              ),
              Obx(
                () => CustomButton(
                  onPressed: () => controller.performClickSubmit(),
                  isAsh: !controller.isReadyOK.value,
                  text: '提交',
                  width: 420.w,
                  height: 90.h,
                ),
              )
            ],
          ),
        )
      ],
    );
  }

  Widget _builderCommonFrameWidget({
    EdgeInsetsGeometry? margin,
    EdgeInsetsGeometry? padding,
    required List<Widget> children,
  }) {
    return Container(
      margin: margin ?? EdgeInsets.only(top: 16.h),
      padding: padding ??
          EdgeInsets.only(
            left: 24.w,
            right: 24.w,
          ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.w),
      ),
      child: Column(
        children: children,
      ),
    );
  }

  ///故障描述Widget
  Widget _builderFaultDesWidget(RepairAddController controller) {
    return Container(
      padding: EdgeInsets.only(top: 30.h, bottom: 48.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('故障描述',
              style: TextStyle(
                fontSize: 32.sp,
                color: const Color(0XFF6D6D6D),
              )),
          TextField(
            controller: controller.faultDescController,
            onChanged: (value) => controller.onChange(faultDesc: value),
            maxLength: 100,
            maxLines: 3,
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: '你的描述便于工人快速接单与维修',
              hintStyle:
                  TextStyle(fontSize: 32.sp, color: const Color(0XFF999999)),
              helperStyle:
                  TextStyle(fontSize: 24.sp, color: const Color(0XFFC6C9CC)),
              contentPadding: EdgeInsets.only(top: 12.h, bottom: 26.h),
            ),
          ),
          Obx(() => Container(
                margin: EdgeInsets.only(top: 26.h),
                height: 196.w,
                child: GridView.count(
                  crossAxisCount: 3,
                  crossAxisSpacing: 30.w,
                  children: _builderImageDescWidgets(controller),
                ),
              )),
        ],
      ),
    );
  }

  List<Widget> _builderImageDescWidgets(RepairAddController controller) {
    return controller.imageDescList.map((model) {
      return Stack(
        children: [
          Positioned(
            left: 0,
            bottom: 0,
            child: InkWell(
              onTap: () => controller.performClickImageItem(model),
              child: Container(
                width: 180.w,
                height: 180.w,
                padding: EdgeInsets.all(model.isPlaceholder ? 0 : 6.w),
                decoration: model.isPlaceholder
                    ? null
                    : BoxDecoration(
                        borderRadius: BorderRadius.circular(12.w),
                        border: Border.all(
                          color: const Color(0XFFC6C9CC),
                          width: 2.w,
                          style: BorderStyle.solid,
                        ),
                      ),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12.w),
                    image: model.isPlaceholder
                        ? DecorationImage(
                            image: AssetImage(
                              'assets/images/${model.absolutePath}',
                            ),
                            fit: BoxFit.fill)
                        : DecorationImage(
                            image: FileImage(File(model.absolutePath)),
                            fit: BoxFit.fill),
                  ),
                ),
              ),
            ),
          ),
          Visibility(
            visible: !model.isPlaceholder,
            child: Positioned(
              top: 0,
              right: 0,
              width: 36.w,
              height: 36.w,
              child: InkWell(
                onTap: () => controller.performClickDeleteImage(model),
                child: Image.asset('assets/images/common_clear.png'),
              ),
            ),
          ),
        ],
      );
    }).toList();
  }
}

class ClipperPath extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, size.width, size.height);
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    return false;
  }
}
